<template>
  <el-echarts height="400" theme="green" :option="option"></el-echarts>
</template>
<script>
import { echartsXFormatter } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    addressCode: String,
    startTime: String,
    endTime: String,
  },
  data() {
    return {
      api: '/industrial/pc/subject/count/',
      option: null,
    }
  },
  computed: {
    orgAddress() {
      return this.addressCode || this.$store.getters.org.addressCode || '520000000000'
    },
    url() {
      return `${this.api}?addressCode=${this.orgAddress}&startTime=${
        this.startTime || ''
      }&endTime=${this.endTime || ''}`
    },
  },
  watch: {
    addressCode() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      let [res, err] = await this.$utils.promise(this.$http.get(this.url))
      if (err) return

      const data = res.data

      // 排序
      const len = data.categoryNameList.length
      for (let i = 0; i < len; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
          if (data.categoryCountList[j] < data.categoryCountList[j + 1]) {
            const tempCount = data.categoryCountList[j + 1]
            data.categoryCountList[j + 1] = data.categoryCountList[j]
            data.categoryCountList[j] = tempCount

            const tempName = data.categoryNameList[j + 1]
            data.categoryNameList[j + 1] = data.categoryNameList[j]
            data.categoryNameList[j] = tempName
          }
        }
      }

      const chartData = {
        title: '各类主体总数',
        subtext: '',
        legend: ['数量', '占比'],
        xData: data.categoryNameList || [],
        seriesBar: data.categoryCountList || [],
        seriesPie: [],
      }

      for (let k = 0; k < data.categoryNameList.length; k++) {
        chartData.seriesPie.push({
          value: data.categoryCountList[k] || 0,
          name: data.categoryNameList[k] || 0,
        })
      }

      chartData.subtext = '农场总数量(个)：' + data.farmSumCount || 0

      this.option = {
        title: {
          text: chartData.title,
          subtext: chartData.subtext,
          subtextStyle: {
            color: '#333',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        toolbox: {
          show: true,
          x: 'right',
          y: '40',
          feature: {
            saveAsImage: {
              show: true,
            },
            dataView: {
              show: true,
              readOnly: true,
              optionToContent: this.dataViewOption,
            },
            magicType: {
              type: ['line', 'bar'],
            },
            restore: {
              show: true,
            },
          },
        },
        grid: {
          x: 50,
          x2: '25%',
          borderWidth: 0,
        },
        legend: {
          data: chartData.legend,
          right: '0',
          y: 10,
        },
        xAxis: [
          {
            type: 'category',
            data: chartData.xData,
            axisLabel: {
              interval: 0,
              formatter: v => echartsXFormatter(v, 2),
            },
          },
        ],
        yAxis: {},
        series: [
          {
            name: chartData.legend[0],
            type: 'bar',
            data: chartData.seriesBar,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#615a5a',
                  },
                },
              },
            },
          },
          {
            name: chartData.legend[1],
            type: 'pie',
            radius: 80,
            center: ['75%', 180],
            clockwise: false,
            roseType: 'area',
            data: chartData.seriesPie,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ({d}%)',
            },
            label: {
              normal: {
                show: true,
                formatter: '{b}({d}%)',
              },
            },
          },
        ],
      }
    },
  },
}
</script>
<style scoped></style>
